<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <!-- vue -->
    <script src="https://unpkg.zhimg.com/vue@2.7.15/dist/vue.js"></script>

    <!-- element-ui -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
</head>

<body>

    <div id="ReplaceBatch">
        <el-container style="height: 1000px; border: 1px solid #eee">

            <el-aside width="50%">
                <div>
                    <el-input type="textarea" autosize placeholder="请输入带问号的sql语句" v-model="sql">
                    </el-input>
                    <el-input type="textarea" autosize placeholder="请输入填充参数" v-model="params">
                    </el-input>
                </div>
                
            </el-aside>

            <el-container>
                <el-main>
                    <div>
                        <el-input type="textarea" autosize placeholder="完整SQL语句" v-model="sqlComplete">
                        </el-input>
                    </div>
                </el-main>
            </el-container>
        </el-container>

    </div>
</body>

</html>
<script>
    let app = new Vue({
        el: "#ReplaceBatch",
        data: () =>  {
            return {
                sql: '',
                params: ''
            }
        },
        computed: {
            sqlComplete: function () {
                if (this.sql == "" || this.params == ""){
                    return "";
                }

                let paramList = this.params.split(',');
                let paramStringList = [];
                paramList.forEach(param => {
                    let leftIndex = param.indexOf("(");
                    let rightIndex = param.indexOf(")");

                    let content = param.slice(0, leftIndex).trimStart();  // 参数值
                    let type = param.slice(leftIndex + 1, rightIndex).trim();  // 参数类型

                    if (type == 'Date'){
                        // 日期类型处理格式
                        paramStringList.push("date '" + content + "'");
                    } else {
                        paramStringList.push("'" + content + "'");
                    }
                });

                let index = 0;
                return this.sql.replace(/\?/g, () => paramStringList[index++]);
            }
        },
        methods: {
        }
    });
</script>